<template>
  <div class="course-page">
    <nav-bar title="课程学习" v-if="flagNumber === '1'" theme="blue" message></nav-bar>
    <nav-bar title="我的课程" v-if="flagNumber === '2'" theme="blue" message></nav-bar>
    <nav-bar title="我的收藏" v-if="flagNumber === '3'" theme="blue" message></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-search
        v-model="search"
        placeholder="搜索课程内容"
        background="#F6F6F6"
        :left-icon="searchLeftIcon"
        @search="getCourseList"
        clearable
      />
    </div>
    <van-sticky :offset-top="88" v-if="flagNumber === '1' && !flag1">
      <van-tabs v-model="typeCode" line-height="0" swipe-threshold="4" border>
        <van-tab v-for="(item, key) in typeList" :key="key" :name="item.subjectTypeCode">
          <template #title>
            <van-tag
              v-if="typeCode === item.subjectTypeCode"
              type="primary"
              round
              plain
              size="large"
              style="background-color: rgba(60, 189, 208, 0.1)"
            >
              {{ item.subjectType }}
            </van-tag>
            <van-tag
              v-else
              round
              size="large"
              @click="changeType(item.subjectTypeCode)"
              text-color="rgba(0, 0, 0, 0.78)"
              color="#f6f6f6"
            >
              {{ item.subjectType }}
            </van-tag>
          </template>
        </van-tab>
      </van-tabs>
    </van-sticky>
    <van-sticky class="page-scroll" :offset-top="flagNumber === '1' ? 140 : 88">
      <div class="course-list">
        <dl class="course-list-item" v-for="(item, key) in courseList" :key="key" @click="clickCourse(item)">
          <dt>
            <van-image width="125" height="75" :src="$config.ImageURl + item.banner" radius="8" />
          </dt>
          <dd>
            <p class="course-list-item--title van-multi-ellipsis--l2">{{ item.subjectName }}</p>
            <p class="course-list-item--desc" v-if="flagNumber === '1'">{{ item.learnedNum || 0 }}人已学习</p>
            <p style="margin-top: 20px" v-if="flagNumber === '2'">上次学习时间：{{ item.lastLearningTime }}</p>
            <p class="course-list-item--desc" v-if="flagNumber === '2'">学习进度：{{ item.progress || 0 }}%</p>
            <p class="course-list-item--desc" v-if="flagNumber === '3'">收藏时间：{{ item.lastLearningTime }}</p>
          </dd>
        </dl>
      </div>
    </van-sticky>
    <template v-if="!flag">
      <van-empty
        :image="require('@/assets/images/basic/pic_no_content.png')"
        description="暂无内容~"
        style="height: 300px"
      />
    </template>
  </div>
</template>
<script>
import learnTest from '@/api/learnTest'
export default {
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      search: '',
      typeList: [
        // {
        //   text: '社区管理',
        //   type: 0
        // },
        // {
        //   text: '党建学习',
        //   type: 1
        // },
        // {
        //   text: '矛盾调解',
        //   type: 2
        // },
        // {
        //   text: '环境环保',
        //   type: 3
        // }
      ],
      typeCode: '',
      courseList: [],
      subjectTypeCode: '',
      flagNumber: '',
      api: '',
      learnedType: 1,
      flag: true,
      flag1: false
    }
  },
  created() {
    this.flagNumber = this.$route.query.flagNumber
    if (this.flagNumber === '1') {
      this.api = 'courseList'
      this.getTypeList()
    } else {
      this.api = 'myList'
      this.getCourseList()
    }
  },
  methods: {
    // 点击修改课程类型
    changeType(subjectTypeCode) {
      this.search = ''
      this.subjectTypeCode = subjectTypeCode
      this.getCourseList()
    },
    // 课程类型列表
    getTypeList() {
      learnTest.Course.typeList().then(res => {
        if (res.data.status === 0 && res.data.data) {
          if (res.data.data.length === 0) {
            this.flag1 = true
          } else {
            this.flag1 = false
            this.typeList = res.data.data
            this.subjectTypeCode = this.typeList[0].subjectTypeCode
            this.getCourseList()
          }
        }
      })
    },
    // 课程列表
    getCourseList() {
      if (this.flagNumber === '2') {
        this.learnedType = 1
      } else if (this.flagNumber === '3') {
        this.learnedType = 2
      }
      var data
      if (this.api === 'myList') {
        data = {
          subjectTypeCode: this.subjectTypeCode,
          subjectName: this.search,
          recordSize: 0,
          pageSize: 10,
          learnedType: this.learnedType
        }
      } else {
        data = {
          subjectTypeCode: this.subjectTypeCode,
          subjectName: this.search,
          recordSize: 0,
          pageSize: 10
        }
      }

      learnTest.Course[this.api](data).then(res => {
        if (res.data.status === 0 && res.data.data) {
          if (res.data.data.list) {
            this.courseList = res.data.data.list
            this.flag = true
          } else {
            this.flag = false
          }
        }
      })
    },
    onSearch() {
      console.log('onSearch')
    },
    onCancel() {
      console.log('onCancel')
    },
    // 查看课程简介
    clickCourse(item) {
      this.$router.push({
        path: '/learnTest/course/introduce',
        query: { subjectCode: item.subjectCode, flagNumber: this.flagNumber, code: item.code }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/learnTest/course/index.less';
</style>
